<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById('canvas')
		var cxt = canvas.getContext('2d')
		canvas.width = 550;
		canvas.height = 400;

		var gnt = cxt.createLinearGradient(0, 150, 200, 150)
		gnt.addColorStop(0, 'hotpink')
		gnt.addColorStop(1, 'blue')
		cxt.fillStyle = gnt
		cxt.fillRect(0, 0, 200, 150)
		
		var text = "计算机203班"
		cxt.font = "bold 50px 微软雅黑"
		var gnt2 = cxt.createLinearGradient(0, 75, 200, 75)
		gnt2.addColorStop(0, "hotpink")
		gnt2.addColorStop(1, "royalblue")
		
		cxt.fillStyle = gnt2
		cxt.fillText(text, 0, 300)
	</script>

</html>